<template>
    <div class="detail-box">
        <div class="top-fixed">
            <header-view :back="true" :title="mainTitle"></header-view>
        </div>
        <ads-block v-if="adsConfig.dt" :aid="adsConfig.dt" :jid="jid"></ads-block>

        <section class="container">
            <content-view :jid="jid" :cid="cid" :tid="tid" :detail="detail"></content-view>

            <content-relate title="相关段子" :text="detail.relatedText" :img="detail.relatedImg"></content-relate>

            <ads-block v-if="adsConfig.dc" :aid="adsConfig.dc" :jid="jid"></ads-block>

            <content-relate title="推荐段子" :text="detail.recommend"></content-relate>

            <bottom-bar></bottom-bar>
        </section>

        <we-chat></we-chat>
        <ads-block v-if="adsConfig.db" :aid="adsConfig.db" :jid="jid"></ads-block>
        <loading-bar v-if="$loadingRouteData"></loading-bar>
    </div>
</template>

<script>
import HeaderView from './../module/Header.vue'
import AdsBlock from './../ads/AdsBlock.vue'
import ContentView from './../module/Content.vue'
import ContentRelate from './../module/ContentRelate.vue'
import BottomBar from './../module/BottomBar.vue'
import WeChat from './../module/WeChat.vue'
import store from './../../store'
import config from './../../config.js'

import LoadingBar from './../module/LoadingBar.vue'

export default {
    name: 'Detail',
    components: {
        HeaderView,
        AdsBlock,
        ContentView,
        ContentRelate,
        BottomBar,
        WeChat,
        LoadingBar
    },
    data (){
        return {
            mainTitle: store.getNavItem(this.$route.params.cid).n,
            detail: {},
            cid: Number(this.$route.params.cid),
            tid: Number(this.$route.params.tid),
            jid: Number(this.$route.params.id),
            adsConfig: store.navConfig.adConfig
        }
    },
    route: {
        data ({to}) {
            this.cid = Number(this.$route.params.cid);
            this.tid = Number(this.$route.params.tid);
            this.jid = Number(this.$route.params.id);
            this.mainTitle = store.getNavItem(this.cid).n;
            this.detail = {};

            return store.getDetail(this.jid, this.cid, this.tid).then(detail =>({
                detail
            }))
        }
    }
}
</script>

<style>
    .detail-box{
        padding-top: 48px;
    }
</style>